import Head from 'next/head';
import ColumnInstanceAPIsTable from '../../../components/prop-tables/ColumnInstanceAPIsTable';
import SourceCode from '../../../components/prop-tables/ColumnInstanceAPIsSource';
import OptionsSwitcher from '../../../example-groups/OptionsSwitcher';

<Head>
  <title>{'Column Instance APIs - Mantine React Table V2 Docs'}</title>
  <meta
    name="description"
    content="All the column instance methods and objects that can be accessed from a column instance in Mantine React Table"
  />
  <meta
    property="og:title"
    content="Mantine React Table Column Instance API Reference"
  />
  <meta
    property="og:description"
    content="A reference of all the column instance api methods and objects that can be used in Mantine React Table"
  />
</Head>

## Column Instance APIs

<OptionsSwitcher
  links={[
    {
      label: 'Table Instance APIs',
      value: 'table-instance-apis',
    },
    {
      label: 'Column Instance APIs',
      value: 'column-instance-apis',
    },
    {
      label: 'Row Instance APIs',
      value: 'row-instance-apis',
    },
    {
      label: 'Cell Instance APIs',
      value: 'cell-instance-apis',
    },
  ]}
/>

> NOTE: These are NOT [column options](/docs/api/column-options) for Mantine React Table. These are just static methods on a column instance that you can use.

Each column has a `column` instance object associated with it that can be accessed in callback props and other places in the table.

You can access and use a `column` instance in quite a few places, but here are some of the most common:

```jsx
const columns = [
  {
    accessorKey: 'username',
    header: 'Username',
    //you can access a column instance in many callback functions in a column definition like this
    mantineTableHeadCellProps: ({ column }) => ({
      style: {
        color: column.getIsSorted() ? 'red' : 'black',
      },
    }),
    //or in the component override callbacks
    Header: ({ column }) => <div>{column.columnDef.header}</div>,
    Cell: ({ cell, column }) => (
      <Box
        style={{
          backgroundColor: column.getIsGrouped() ? 'green' : 'white',
        }}
      >
        {cell.getValue()}
      </Box>
    ),
  },
];

const table = useMantineReactTable({
  columns,
  data,
  //or in callback props like this
  mantineTableBodyCellProps: ({ column }) => ({
    style: {
      boxShadow: column.getIsPinned() ? '0 0 0 2px red' : 'none',
    },
  }),
});
```

<ColumnInstanceAPIsTable />

<SourceCode />
